<template>
  <div class="container">
    <el-dialog width="900px" title="新增文章" :visible="showArtAdd" @close="btnCancel">
      <el-form ref="addArtForm" :model="addArtForm" :rules="rules">
        <el-form-item prop="title" label="文章标题">
          <el-input v-model="addArtForm.title" style="width: 90%;" placeholder="请输入文章标题" />
        </el-form-item>
        <el-form-item prop="articleBody" label="文章内容">
          <div style="border: 1px solid #ccc; width: 90%; margin-left: 78px;">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editor"
              :default-config="toolbarConfig"
              :mode="mode"
            />
            <Editor
              v-model="addArtForm.articleBody"
              style="height: 150px;"
              :default-config="editorConfig"
              :mode="mode"
              @onCreated="onCreated"
            />
          </div>
        </el-form-item>
        <el-form-item prop="videoURL" label="视频地址" style="padding-left: 10px;">
          <el-input v-model="addArtForm.videoURL" style="width: 90%;" placeholder="请输入视频地址" />
        </el-form-item>
        <el-form-item>
          <el-row style="margin-top: 40px;" type="flex" justify="end">
            <el-button @click="btnCancel">取消</el-button>
            <el-button type="primary" @click="btnAddOK">确定</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { add, detail, update } from '@/api/hmmm/articles.js'

export default Vue.extend({
  components: { Editor, Toolbar },
  props: {
    showArtAdd: {
      type: Boolean,
      default: false
    },
    currentNodeId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      addArtForm: {
        title: '', // 文章标题
        articleBody: '', // 文章内容
        videoURL: '' // 视频地址
      },
      rules: {
        title: [
          { required: true, message: '文章标题不能为空', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '文章内容不能为空', trigger: 'blur' }
        ]
      },
      editor: null,
      html: '',
      toolbarConfig: { },
      editorConfig: {
        placeholder: '请输入内容...',
        codeLangs: [
          { text: 'CSS', value: 'css' },
          { text: 'HTML', value: 'html' },
          { text: 'XML', value: 'xml' }
        // 其他
        ]
      },
      mode: 'default' // or 'simple'
    }
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      this.html = '<p>请输入内容</p>'
    }, 1500)
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    btnAddOK() {
      this.$refs.addArtForm.validate(async isOK => {
        // console.log(isOK)
        if (isOK) {
          if (this.addArtForm.id) {
            // 有id 证明是编辑模式
            await update(this.addArtForm)
            this.$message.success('修改文章成功!')
          } else {
            // 无id 证明是添加
            await add(this.addArtForm)
            this.$message.success('新增文章成功!')
          }
          this.$emit('update')
          this.btnCancel()
        }
      })
    },
    // 关闭弹层
    btnCancel() {
      this.addArtForm = {
        title: '', // 文章标题
        articleBody: '', // 文章内容
        videoURL: '' // 视频地址
      }
      this.$refs.addArtForm.resetFields()
      this.$emit('closeArtAdd')
    },
    // 获取当前点击的文章详情
    async getCurrentArtDetail() {
      const { data } = await detail({ id: this.currentNodeId })
      this.addArtForm = data
      this.$emit('openDialog')
    }
  }

})
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped lang='scss'>
.container {
  padding: 15px;
}
</style>
